<template>
  <div class="box-border relative bg-cover w-full pb-6">
    <y-image
      placeholder
      class="lg:hidden absolute object-cover inset-0 w-full h-full"
      width="375"
      height="493"
      src="home-imgs/h5home_news@2x.png" />
    <y-image
      placeholder
      width="1920"
      height="606"
      class="hidden lg:block object-cover absolute inset-0 w-full h-full"
      src="home-imgs/pchome_news_pic@2x.png" />
    <div class="relative z-1 lg:mx-auto lg:w-100 flex flex-col">
      <!-- title -->
      <div class="pl-4 lg:pl-0 mt-6 lg:flex lg:items-center lg:justify-between">
        <div class="text-2xl font-black font-mono lg:font-medium flex lg:block text-[#fff] leading-2">
          <h3 class="mr-3">NEWS &</h3>
          <h3>PROMOTIONS</h3>
        </div>
        <div class="bg-[#EB414E] lg:hidden w-10 h-1"></div>
        <NuxtLink external :to="$localePath('/article/list/1')" class="text-sm hidden lg:block leading-4 text-white">
          {{ $mt('More gaming news and promotions on') }}
          <span class="text-[#EB414E] hover:text-[#F0737C]">{{ $mt('BitTopup News') }}</span>
        </NuxtLink>
      </div>
      <!--      h5-->
      <div class="mb-4 lg:hidden w-full px-2.5 overflow-hidden">
        <div class="flex overflow-auto w-full">
          <NewHomeDesItem
            class="shrink-0 w-[130px] mr-3 last:mr-0"
            v-for="(item, index) in homeArticleList"
            :key="index"
            :data="item" />
        </div>
      </div>
      <!-- pc -->
      <div class="mt-2 hidden lg:grid lg:grid-cols-5 gap-x-9 gap-y-4">
        <NewHomeDesItem
          class="lg:item-center hidden text-xs text-white lg:flex"
          v-for="item in homeArticleList.slice(0, 10)"
          :key="item.id"
          :data="item" />
      </div>

      <!-- view more -->
      <NuxtLink
        external
        :to="$localePath('/article/list/1')"
        class="lg:hidden text-xs text-[#fff] flex items-center justify-center">
        <span class="text-base mr-2 border-b pb-0.5">{{ $mt('View more') }}</span>
        <WImage class="w-3.5 h-3.5" :src="useAsset('pc-home/h5home_exclusive_right@2x(1).png')" />
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import NewHomeDesItem from '~/components/home/NewHomeDesItem.vue'
import WIcon from '~/components/logic/WIcon.vue'
import WImage from '~/components/logic/WImage.vue'
import { useArticleStore } from '~/store/article'
import YImage from '~/components/logic/YImage.vue'
import { chunk } from '~/utils'
import NewHomGoodsList from '~/components/home/NewHomGoodsList.vue'

const i18n = useI18n()
const store = useArticleStore()
await useLazyAsyncData(async () => {
  await store.initHomeArticles()
  return 1
})
const { homeArticleList } = storeToRefs(store)
</script>
